<template>
    <div>
        <van-form>
            <van-field v-model='form.mobile' label='手机号' placeholder='手机号' :rules="[{'required':true,'message':'必须输入手机号'}]"></van-field>
            <van-button @click="send">发送</van-button>
            <van-field v-model='form.password' label='密码' placeholder='密码' :rules="[{'required':true,'message':'必须输入密码'}]"></van-field>
            <van-field v-model='form.repassword' label='确认密码'  placeholder='确认密码' :rules="[{'required':true,'message':'必须输入密码'}]"></van-field>
            <van-field v-model='form.code' label='验证码' placeholder='请输入验证码' :rules="[{'required':true,'message':'必须输入验证码'}]"></van-field>
        <van-button color="linear-gradient(to right, #7232dd, #ffffff)" @click="reg" style="width:200px">
                注册
        </van-button>
        </van-form>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{},
                username:'',
                password:''
            }
        },
        methods:{
            //发送验证码
            send(){
                //正则验证手机号
                let reg=/^1[3-9]\d{9}$/
                //入过手机号验证不通过
                if(!reg.test(this.form.mobile)){
                    alert('手机号不合法')
                    return
                }
                //调用接口发送验证码
                this.$axios.get('smscode?mobile='+this.form.mobile)
                .then(res=>{
                    alert('发送成功')
                    alert(res.data.scode)
                })
                
            },
            //注册
            reg(){
                //验证两个密码是否相等
                if(this.form.password != this.form.repassword){
                    alert('两次密码不一致')
                    return
                }
                this.$axios.post('userM',this.form)
                    .then(res=>{
                        if(res.data.code==200){
                            alert('注册成功')
                        }
                })
            },
            
        },

    }
</script>

<style scoped>

</style>